<html>
    <head>
        <title>Folium</title>
        <meta charset="utf-8" />
        <link rel="icon" type="image/x-icon" href="./favicon.png" />
        <link
            rel="stylesheet"
            href="https://pyscript.net/latest/pyscript.css"
        />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
        <link rel="stylesheet" href="./assets/css/examples.css" />
    </head>
    <body>
        <nav class="navbar" style="background-color: #000000">
            <div class="app-header">
                <a href="/">
                    <img src="./logo.png" class="logo" />
                </a>
                <a class="title" href="" style="color: #f0ab3c">Folium</a>
            </div>
        </nav>
        <section class="pyscript">
            <div id="folium"></div>

            <py-tutor>
                <py-config>
                    packages = [
                      "folium",
                      "pandas"
                    ]
                    plugins = [
                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
                    ]
                </py-config>

                <py-script>
                    import folium
                    import json
                    import pandas as pd

                    from pyodide.http import open_url

                    url = (
                        "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data"
                    )
                    state_geo = f"{url}/us-states.json"
                    state_unemployment = f"{url}/US_Unemployment_Oct2012.csv"
                    state_data = pd.read_csv(open_url(state_unemployment))
                    geo_json = json.loads(open_url(state_geo).read())

                    m = folium.Map(location=[48, -102], zoom_start=3)

                    folium.Choropleth(
                        geo_data=geo_json,
                        name="choropleth",
                        data=state_data,
                        columns=["State", "Unemployment"],
                        key_on="feature.id",
                        fill_color="YlGn",
                        fill_opacity=0.7,
                        line_opacity=0.2,
                        legend_name="Unemployment Rate (%)",
                    ).add_to(m)

                    folium.LayerControl().add_to(m)

                    display(m, target="folium")
                </py-script>
            </py-tutor>
        </section>
    </body>
</html>
